<template>
  <layout title="swipeAction滑动菜单" :custom-content-style="layoutCustomStyle">
    <layout-content title="基础使用">
      <tn-swipe-action>
        <tn-swipe-action-item v-for="item in 2" :key="item" :options="defaultSwipeData">
          <tn-list>
            <view class="message__item">
              <view class="message__avatar">
                <tn-avatar icon="https://tnuiimage.tnkjapp.com/avatar/xiaomai3.jpg" size="90" shape="square" bg-color="transparent"></tn-avatar>
              </view>
              <view class="message__data">
                <view class="message__top">
                  <view class="message__title">图鸟UI开源线报群</view>
                  <view class="message__time">22:22</view>
                </view>
                <view class="message__bottom">
                  <view class="message__desc">图鸟北北: 准备更新版本了</view>
                  <view class="message__notice">
                    <tn-icon icon="notice-no"></tn-icon>
                  </view>
                </view>
              </view>
            </view>
          </tn-list>
        </tn-swipe-action-item>
      </tn-swipe-action>
    </layout-content>

    <layout-content title="允许同时打开多个">
      <tn-swipe-action :auto-close="false">
        <tn-swipe-action-item v-for="item in 2" :key="item" :options="defaultSwipeData">
          <tn-list>
            <view class="message__item">
              <view class="message__avatar">
                <tn-avatar icon="https://tnuiimage.tnkjapp.com/avatar/xiaomai3.jpg" size="90" shape="square" bg-color="transparent"></tn-avatar>
              </view>
              <view class="message__data">
                <view class="message__top">
                  <view class="message__title">图鸟UI开源线报群</view>
                  <view class="message__time">22:22</view>
                </view>
                <view class="message__bottom">
                  <view class="message__desc">图鸟北北: 准备更新版本了</view>
                  <view class="message__notice">
                    <tn-icon icon="notice-no"></tn-icon>
                  </view>
                </view>
              </view>
            </view>
          </tn-list>
        </tn-swipe-action-item>
      </tn-swipe-action>
    </layout-content>

    <layout-content title="点击选项后不自动关闭">
      <tn-swipe-action>
        <tn-swipe-action-item :options="defaultSwipeData" :auto-close="false">
          <tn-list>
            <view class="message__item">
              <view class="message__avatar">
                <tn-avatar icon="https://tnuiimage.tnkjapp.com/avatar/xiaomai3.jpg" size="90" shape="square" bg-color="transparent"></tn-avatar>
              </view>
              <view class="message__data">
                <view class="message__top">
                  <view class="message__title">图鸟UI开源线报群</view>
                  <view class="message__time">22:22</view>
                </view>
                <view class="message__bottom">
                  <view class="message__desc">图鸟北北: 准备更新版本了</view>
                  <view class="message__notice">
                    <tn-icon icon="notice-no"></tn-icon>
                  </view>
                </view>
              </view>
            </view>
          </tn-list>
        </tn-swipe-action-item>
      </tn-swipe-action>
    </layout-content>

    <layout-content title="设置字体、图标大小">
      <tn-swipe-action>
        <tn-swipe-action-item :options="customSizeSwipeData" :auto-close="false">
          <tn-list>
            <view class="message__item">
              <view class="message__avatar">
                <tn-avatar icon="https://tnuiimage.tnkjapp.com/avatar/xiaomai3.jpg" size="90" shape="square" bg-color="transparent"></tn-avatar>
              </view>
              <view class="message__data">
                <view class="message__top">
                  <view class="message__title">图鸟UI开源线报群</view>
                  <view class="message__time">22:22</view>
                </view>
                <view class="message__bottom">
                  <view class="message__desc">图鸟北北: 准备更新版本了</view>
                  <view class="message__notice">
                    <tn-icon icon="notice-no"></tn-icon>
                  </view>
                </view>
              </view>
            </view>
          </tn-list>
        </tn-swipe-action-item>
      </tn-swipe-action>
    </layout-content>

    <layout-content title="单图标选项">
      <tn-swipe-action>
        <tn-swipe-action-item :options="singleIconSwipeData" :auto-close="false">
          <tn-list>
            <view class="message__item">
              <view class="message__avatar">
                <tn-avatar icon="https://tnuiimage.tnkjapp.com/avatar/xiaomai3.jpg" size="90" shape="square" bg-color="transparent"></tn-avatar>
              </view>
              <view class="message__data">
                <view class="message__top">
                  <view class="message__title">图鸟UI开源线报群</view>
                  <view class="message__time">22:22</view>
                </view>
                <view class="message__bottom">
                  <view class="message__desc">图鸟北北: 准备更新版本了</view>
                  <view class="message__notice">
                    <tn-icon icon="notice-no"></tn-icon>
                  </view>
                </view>
              </view>
            </view>
          </tn-list>
        </tn-swipe-action-item>
      </tn-swipe-action>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnSwipeAction from '@/tuniao-ui/components/tn-swipe-action/src/SwipeAction.vue'
import TnSwipeActionItem from '@/tuniao-ui/components/tn-swipe-action/src/SwipeActionItem.vue'
import { SwipeOptionData } from '@/tuniao-ui/types'

import TnList from '@/tuniao-ui/components/tn-list/src/List.vue'
import TnAvatar from '@/tuniao-ui/components/tn-avatar/src/Avatar.vue'
import TnIcon from '@/tuniao-ui/components/tn-icon/src/Icon.vue'

const layoutCustomStyle: CSSProperties = {
  padding: '30rpx 0'
}

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 选项数据
const defaultSwipeData: SwipeOptionData[] = [
  { text: '置顶', icon: 'star', bgColor: '#FFA726' },
  { text: '删除', icon: 'delete', bgColor: '#E83A30' }
]
const customSizeSwipeData: SwipeOptionData[] = [
  { text: '置顶', icon: 'star', bgColor: '#FFA726', fontSize: '40rpx', iconSize: '40rpx' },
  { text: '删除', icon: 'delete', bgColor: '#E83A30' }
]
const singleIconSwipeData: SwipeOptionData[] = [
  { text: '', icon: 'star', bgColor: '#FFA726', customStyle: { width: '90rpx', height: '90rpx', borderRadius: '50%', marginRight: '20rpx' } },
  { text: '', icon: 'delete', bgColor: '#E83A30', customStyle: { width: '90rpx', height: '90rpx', borderRadius: '50%' } }
]
</script>

<style lang="scss" scoped>
.message {
  &__item {
    width: 100%;
    height: 90rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  &__avatar {
    width: 90rpx;
  }
  &__data {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    padding: 6rpx 0rpx;
    margin-left: 20rpx;
  }
  &__top, &__bottom {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
  &__bottom {
    font-size: 24rpx;
    color: #AAAAAA;
  }
  &__time {
    font-size: 24rpx;
    color: #AAAAAA;
  }
}
</style>
